<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./assets/css/tongji_ykhx.css">
</head>
<body>
<div class="box">
    <!--头部-->
    <div class="title-box">
        <div class="title-img">
            <h3>光山县旅游产业监控中心</h3>
        </div>
        <ul class="link-box">
            <li class="active"><a href="index.html">人流热力图</a></li>
            <li><a href="index.html">行业运行监测</a></li>
            <li><a href="index.html">人流热力图</a></li>
        </ul>
        <div class="title-left">
            <span>光山县</span>
            <span id="weather">小雨转晴</span>
            <span id="temperature">32/23℃</span>
            <span id="windPower">东风</span>
        </div>
    </div>
    <!--主体-->
    <div class="main-box">
        <!--导航-->
        <div class="nav-box">
            <ul>
                <li class="active">
                    <a href="#">
                        <div>
                            <img src="./assets/images/icon-index.png">
                            <img src="./assets/images/icon-index-active.png">
                        </div>
                        <p>大数据人流热力图</p>
                    </a>
                </li>
                <li>
                    <a href="./chanye_jq.html">
                        <div>
                            <img src="./assets/images/icon-analysis.png">
                            <img src="./assets/images/icon-analysis-active.png">
                        </div>
                        <p>行业运行监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./industryDevelopment.html">
                        <div>
                            <img src="./assets/images/icon-operation.png">
                            <img src="./assets/images/icon-operation-active.png">
                        </div>
                        <p>行业发展监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./lvyoujia_qx.html">
                        <div>
                            <img src="./assets/images/icon-activity.png">
                            <img src="./assets/images/icon-activity-active.png">
                        </div>
                        <p>第三方数据处理和呈现</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--数据内容-->
        <div class="content-box flex-column">
            <div class="content-nav">
                <ul>
                    <li class="active">
                        <a href="#">大数据人流热力图</a>
                    </li>
                </ul>
            </div>
            <div class="content-main flex-row flex1">

                <div class="content-left flex2">
                    <div class="map-box flex3">
                        <div class="index-map" id="index-map"></div>
                        <div class="map-info">
                            <div>
                                <p>景区名称：大苏山国家森林公园</p>
                                <span>客流量：32100</span>
                            </div>
                            <div>
                                <p>景区名称：司马光故居</p>
                                <span>客流量：620</span>
                            </div>
                            <div>
                                <p>景区名称：官渡河古渡口</p>
                                <span>客流量：5860</span>
                            </div>
                        </div>
                        <textarea id="input">这是幕后黑手</textarea>
                    </div>

                    <div class="flex1 content-center-bg time-box bounceInUp animated">
                        <div class="content-title">客流趋势分析</div>

                        <div class="flex1" id="index_3">

                        </div>
                    </div>
                </div>
                <div class="content-right flex2">
                    <div class="content-right flex1">
                        <div class="portrait-box flex1">
                            <div class="bg-1 flex1 animated slideInDown delay-1">
                                <div class="content-title">性别占比</div>
                                <div class="bg-main-1" id="portrait_2"></div>
                            </div>
                            <div class="bg-1 flex1 animated slideInDown delay-1">
                                <div class="content-title">年龄分布</div>
                                <div class="bg-main-1" id="portrait_3"></div>
                            </div>
                        </div>
                        <div class="portrait-box flex1">
                            <div class="bg-1 flex1 animated slideInRight delay-2">
                                <div class="content-title">停留时长</div>
                                <div class="bg-main-1" id="portrait_4"></div>
                            </div>
                            <div class="bg-1 flex1 animated slideInRight delay-2">
                                <div class="content-title">游客出行方式</div>
                                <div class="bg-main-1" id="portrait_5"></div>
                            </div>
                        </div>

                        <div class="bg-1 flex1 animated slideInUp delay-3">
                            <div class="content-title">客源地</div>
                            <div class="bg-main-1 place-box">
                                <ul>
                                    <li class="active">客源省TOP10</li>
                                    <li>客源城市TOP10</li>
                                </ul>
                                <div id="portrait_6" class="flex1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/ECharts/china.js"></script>
<script src="./assets/js/public.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=c8e5a90c0f22f143055214a84727eed8" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

<script>
    // 百度地图API功能
    var map = new BMap.Map("index-map", {minZoom: 7, maxZoom: 15}, {enableMapClick: false});
    var point = new BMap.Point(114.925922, 32.01425);    // 初始化地图,设置中心点坐标
    map.centerAndZoom(point, 14);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var blist = [];
    var districtLoading = 0;
    function getBoundary(){
        //百度地图获取行政区域的对象
        var bdary = new BMap.Boundary();

        bdary.get("光山", function (rs) {       //获取行政区域

            //以下是获取行政区域的回调
            map.clearOverlays();        //清除地图覆盖物

            //需要绘制边界多边形的点集合
            var paths = new Array();
            //行政区域点集合，以;分隔的
            var pointliststr = rs.boundaries[0];
            //3获取点数组，push到 paths中
            var pointlist = pointliststr.split(";");
            var firstPoint;
            for(var i =0;i<pointlist.length;i++)
            {

                var tempPt = pointlist[i].split(',');
                var newPoint = new BMap.Point(tempPt[0],tempPt[1]);
                if(i==0){ firstPoint= newPoint;};

                paths.push(newPoint);
            }
            //第一点再推进去，形成一个闭环，构造了多边形的内环
            paths.push(firstPoint);

            //自定义的八个便捷点，从东开始逆时针，东，东北，北，西北，西，西南，南，东南（必须按顺序来）
            paths.push(new BMap.Point(170.672126, 39.623555));
            paths.push(new BMap.Point(170.672126, 81.291804));
            paths.push(new BMap.Point(105.913641, 81.291804));
            paths.push(new BMap.Point(-169.604276,  81.291804));
            paths.push(new BMap.Point(-169.604276, 39.623555));
            paths.push(new BMap.Point(-169.604276, -68.045308));
            paths.push(new BMap.Point(105.913641, -68.045308));
            paths.push(new BMap.Point(170.672126, -68.045308));
            paths.push(new BMap.Point(170.672126, 39.623555));

            //4绘制第一个多边形，覆盖住除行政区外的所有部分,fillColor:填充色，strokeColor：边界颜色（设置透明，否则会有其他线条），strokeOpacity：线条透明，fillOpacity：填充物透明。
            var ply1 = new BMap.Polygon("",
                { fillColor: "#708090", strokeColor: "transparent", strokeOpacity:0,fillOpacity:0}); //建立多边形覆盖物
            //将之前形成的点set到多边形对象中
            ply1.setPath(paths);
            //在地图上添加第一个多边形
            map.addOverlay(ply1);  //遮罩物是半透明的，如果需要纯色可以多添加几层


            //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层，绘制出边界线
            var ply = new BMap.Polygon(rs.boundaries[0],
                { strokeWeight: 2, strokeColor: "#ff0000",fillColor: "transparent" });
            map.addOverlay(ply);
            map.setViewport(ply.getPath());    //调整视野
        });
    }

    setTimeout(function(){
        getBoundary();
    }, 200);
</script>
</html>
